<template>
	<div class="icon-wrap">
		<swiper :options="swiperOption" ref="mySwiper">
		    <!-- slides -->
		    <swiper-slide v-for="(item,index) of pages" :key="index">
				<div class="icon-div">
					<div class="icon-item" v-for="p of item" :key="p.id">
						<div class="img-container">
							<img class="img-item" :src="p.iconUrl" alt="景点">
						</div>
						<div class="icon-title">{{p.title}}</div>
					</div>
				</div>
		    </swiper-slide>
		    <div class="swiper-pagination"  slot="pagination"></div>
		</swiper>
		
	</div>
</template>
<script>
	export default{
		name:"HomeIcon",
		props:{
			iconList:Array
		},
		data(){
			return {
				swiperOption:{

				}
			}
		},
		computed:{
			pages(){
				const pages = []
				this.iconList.forEach((item,index) => {
					const page = Math.floor(index / 8)
					if(!pages[page]){
						pages[page] = []
					}
					pages[page].push(item)
				})
				return pages
			}
		}
	}
</script>
<style lang="less" scoped>
	.icon-wrap{
		background: #fff;
		height: 3.7rem;
		.icon-item{
			float: left;
			width: 25%;
			height: 1.5rem;
			text-align: center;
			padding-top: .2rem;
			.img-container{
				display: inline-block;
				height: 1.1rem;
				width: 1.1rem;
				box-sizing: border-box;
				.img-item{
					width: 100%;
					height: 100%;
				}

			}
			.icon-title{
				padding-top: .06rem;
				color:#666;
			}
		}
	}
</style>